import React, { Component } from 'react'
import connect from './connect'

// 图片滑块
import { Carousel } from 'antd-mobile'

import {
    SwiperWarp
} from './style'

@connect
class index extends Component {
  state = {
    dots: true
  }
  componentDidMount() {
    // 发起网络请求
    this.props.getSwiperCmp2()
  }
  render() {
    // 异步加载容错
    let swiper = this.props.swiper ? this.props.swiper.toJS() : []
    return (
        <SwiperWarp>
        <Carousel
            //自动播放
            autoplay={false}
            //无限拖动
            infinite
            //分页器是否显示
            dots={this.state.dots}
        >
            {swiper.map(item => (
                <img key={item.id} src={item.image}
                    alt=""
                    style={{ width: '100%', verticalAlign: 'top' }}
                    onLoad={() => {
                        this.setState(state => ({ dots: true }))
                    }}
                />
            ))}
        </Carousel>
    </SwiperWarp>
    )
  }
}

export default index


